<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>47-无限循环滚动</title>
    <style>
        *{
             margin: 0;
             padding: 0;
        }
        div{
            width: 464px;
            height: 120px;
            margin: 100px auto;
            overflow: hidden;
            border: 1px solid #000;
        }
        ul{
            width:1392px;
            height: 120px;
            list-style: none;
            background: #000;
        }
        ul>li{
            float: left;
        }
    </style>
    <script src="jQuery/jquery-3.4.1.js"></script>
    <script>
         $(function () {
             var offset=0;
             var timer;
             function outoPlay(){
                 timer=setInterval(function () {
                     offset -=10;
                     if(offset<=-928){
                         offset=0;
                     }
                     $("ul").css("marginLeft",offset);
                 },60);
             }
             outoPlay();

             $("li").hover(function () {
                clearInterval(timer);
                $(this).siblings().fadeTo(100,0.5);
                 $(this).fadeTo(100,1);
             },function () {
                outoPlay();
                $("li").fadeTo(100,1);
             })
         })
    </script>
</head>
<body>
<div>
    <ul>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
    </ul>
</div>
</body>
</html>